<!--
 * @Author: 张鹏
 * @Date: 2025-07-04 09:53:55
 * @LastEditors: zhangp zhangp@163.com
 * @LastEditTime: 2025-07-07 15:15:00
 * @FilePath: \mapbox\src\views\example\PointLinePolygon.vue
 * @Description: 点线面示例
 * 
-->
<template>
    <div class="map-page">
        <div id="map" class="map-container"></div>
        
        <MapToolbar 
            title="几何图形工具"
            @remove="removeEntity"
            @removeAll="removeAllEntities"
            @hideAll="hideAllEntities"
            @showAll="showAllEntities"
        />
    </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue'
import Map from '289-map'
import Mock from 'mockjs'
import MapToolbar from '@/components/MapToolbar.vue'

const entities = reactive([])
let map

onMounted(async () => {
    map = new Map('map', {
        scene: {
            center: {
                lng: 116.40,
                lat: 39.90,
                alt: 1000,
                heading: 0,
            },
            zoom: 2
        },
        style: 'https://demotiles.maplibre.org/style.json',
    })

    // 点图形
    const graphic = new Map.Graphic.Point({
        show: true,
        position: [102.693392, 35.663182],
        style: {
            width: 100,
            color: '#ff0000',
            opacity: 0.5
        },
        popup: '这是个点',
        popupTrigger: 'mouse',
        popupOptions: {
            closeButton: true,
            maxWidth: '200px',
        }
    })
    
    // 线图形
    const graphic2 = new Map.Graphic.Line({
        show: true,
        position: [[127.562109, 30.210134], [130.198828, 62.056786]],
        style: {
            width: 6,
            color: '#ff0000',
            opacity: 0.7
        },
        popup: '这是个线',
        popupTrigger: 'click',
        popupOptions: {
            closeButton: true,
            maxWidth: '200px',
        }
    })
    
    // 面图形
    const graphic3 = new Map.Graphic.Polygon({
        show: true,
        position: [[101.464648, 29.715368], [115.185224, 28.867246], [107.104792, 47.758265]],
        style: {
            color: '#ff0000',
            opacity: 0.6,
        },
        popup: '这是个面',
        popupTrigger: 'click',
        popupOptions: {
            closeButton: true,
            maxWidth: '200px',
        }
    })
    
    entities.push(graphic, graphic2, graphic3)
    map.addGraphic(graphic)
    map.addGraphic(graphic2)
    map.addGraphic(graphic3)
})

const removeEntity = () => {
    for (const item of entities) {
        map.removeGraphic(item)
    }
}

const removeAllEntities = () => {
    entities.length = 0
    map.removeAllGraphics()
}

const hideAllEntities = () => {
    for (const item of entities) {
        item.show = false
    }
}

const showAllEntities = () => {
    for (const item of entities) {
        item.show = true
    }
}
</script>

<style lang="scss" scoped>
.map-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 100%;
}

.page-info {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 320px;
}

.info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    h3 {
        margin: 0 0 12px 0;
        color: #2c3e50;
        font-size: 16px;
        font-weight: 600;
    }
    
    p {
        margin: 0 0 16px 0;
        color: #7f8c8d;
        font-size: 14px;
        line-height: 1.5;
    }
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5a6c7d;
    
    .feature-icon {
        font-size: 16px;
    }
}

// 响应式设计
@media (max-width: 768px) {
    .page-info {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .info-card {
        padding: 16px;
    }
    
    .info-card h3 {
        font-size: 15px;
    }
    
    .info-card p {
        font-size: 13px;
    }
    
    .feature-item {
        font-size: 12px;
    }
}
</style>